<template>
  <div class="">
    <van-nav-bar title="密码登录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <!--账号-->
      <van-field v-model="username" label="账号" />
      <!--密码-->
      <van-field name="switch" label="密码">
        <template #input>
          <input
            class="hide"
            type="text"
            maxlength="8"
            v-if="switchChecked"
            v-model="pwd"
          />
          <input class="hide" type="password" maxlength="8" v-else v-model="pwd" />
          <van-switch
            v-model="switchChecked"
            size="20"
            @click="switchChecked = !switchChecked"
          />
        </template>
      </van-field>
      <!--验证码-->
      <van-field name="switch" label="验证码">
        <template #input>
          <input class="hide" type="text" maxlength="4" v-model="captcha" />
          <!-- <img
              class="get_verification"
              src="../../public/img/验证码.png"
              @click="updateCapcha"
              ref="captcha"
            /> -->
          <div class="change_img">
            <span>看不清</span><br />
            <span>换一张</span>
          </div>
        </template>
      </van-field>
    </van-form>
    <div>
      <p class="login_tips">温馨提示：未注册过的账号，登录时将自动注册</p>
      <p class="login_tips">注册过的用户可凭账号密码登录</p>
    </div>
    <!--登录-->
    <div>
      <van-button class="login_container" round block type="info" native-type="submit">登录</van-button>
    </div>
    <a href="javascript:;" class="to_forget">重置密码?</a>
  </div>
</template>

<script>
import { Button, Form, Field, NavBar, Toast, Switch } from "vant";

export default {
  name: "Login",
  data() {
    return {
      username: "", // 用户名
      password: "", // 密码
      switchChecked: false, // 是否显示密码，默认不显示
      pwd: "", // 密码
      captcha: "", // 图形验证码
    };
  },
  components: {
    [Button.name]: Button,
    [Form.name]: Form,
    [Field.name]: Field,
    [NavBar.name]: NavBar,
    [Switch.name]: Switch,
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onSubmit(values) {
      console.log("sumbit", values);
    },
    // 异步登录
    login() {
      // 前台登录验证，取出账号、密码、验证码
      // const {name, pwd, captcha} = this
      // if(!this.name){
      //     // 用户名必须指定
      // }else if(!this.pwd){
      //     // 密码必须指定
      // }else if(!this.captcha){
      //     // 验证码必须指定
      // }
    },
  },
};
</script>

<style>
/*导航栏背景色 */
.van-nav-bar__content {
  background: #3190e8;
}
/*文字颜色 */
.van-nav-bar__title,
.van-nav-bar__left,
.van-nav-bar .van-icon,
.van-nav-bar__text {
  color: white;
}
/*van_form组件距离导航栏宽度 */
.van-form {
  padding-top: 14px;
}
.van-button--info {
  border: 1px solid #4cd964;
}
.login_tips {
  color: red;
  font-size: 12px;
  padding: 3px 14px;
}
.login_container {
  background: #4cd964;
}
.van-field__control {
    color: white;
}
/*验证码内input标签 */
.hide {
  width: 198px;
  border: 0px;
  color: #666;
}
/*重置密码 */
.to_forget {
  float: right;
  padding: 20px;
  font-size: 14px;
  color: #3190e8;
  margin-right: 7px;
}
/* .change_img {
  width: 50px;
  float: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} */
.change_img :nth-of-type(2) {
  color: #3b95e9;
}
</style>
